<template>
  <div class="review-filter">
    <el-form :inline="true" :model="query" class="filter-form">
      <el-form-item label="订单编号：">
        <el-input v-model="query.orderNo" placeholder="请输入订单号" clearable />
      </el-form-item>
      <el-form-item label="配送员：">
        <el-input v-model="query.riderName" placeholder="请输入配送员姓名" clearable />
      </el-form-item>
      <el-form-item label="名称：">
        <el-input v-model="query.customerOrMerchantName" placeholder="请输入顾客/商家名称" clearable />
      </el-form-item>
      <el-form-item label="评价内容：">
        <el-input v-model="query.keyword" placeholder="请输入评价关键词" clearable />
      </el-form-item>
      <el-form-item label="评价时间：">
        <el-select v-model="query.timeRange" placeholder="请选择" style="width: 150px">
          <el-option label="近三个月" value="3m" />
          <el-option label="近半年" value="6m" />
          <el-option label="近一年" value="1y" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">清除条件</el-button>
      </el-form-item>
    </el-form>

    <div class="filter-row">
      <span>评价星级：</span>
      <el-button-group>
        <el-button
          v-for="star in stars"
          :key="star.value"
          :type="query.star === star.value ? 'primary' : 'default'"
          @click="query.star = star.value"
        >{{ star.label }}</el-button>
      </el-button-group>
      <span style="margin-left: 24px;">评价类型：</span>
      <el-button-group>
        <el-button
          :type="query.type === 'customer' ? 'primary' : 'default'"
          @click="query.type = 'customer'"
        >顾客的</el-button>
        <el-button
          :type="query.type === 'merchant' ? 'primary' : 'default'"
          @click="query.type = 'merchant'"
        >商家的</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup name="OrderReview">
// 评价管理页面逻辑


import { ref } from 'vue'

const query = ref({
  orderNo: '',
  riderName: '',
  customerOrMerchantName: '',
  keyword: '',
  timeRange: '3m',
  star: '',
  type: 'customer'
})

const stars = [
  { label: '五星', value: 5 },
  { label: '四星', value: 4 },
  { label: '三星', value: 3 },
  { label: '二星', value: 2 },
  { label: '一星', value: 1 }
]

function onSearch() {
  // 这里发起查询请求
  console.log('查询参数', query.value)
}

function onReset() {
  query.value = {
    orderNo: '',
    riderName: '',
    customerOrMerchant: '',
    keyword: '',
    timeRange: '3m',
    star: '',
    type: 'customer'
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.review-filter {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}
.filter-form {
  margin-bottom: 16px;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>  